<template>
  <div class="alertTip">
    <el-alert
      :title="title"
      :type="type"
      :effect="effect"
      :description="description"
      :show-icon="showIcon"
      :closable="closable"
      :center="center"
      @close="handleClose"
      v-bind="$attrs"
      ><slot></slot
    ></el-alert>
  </div>
</template>

<script lang="ts" setup>
import { ref, useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs, "attrs的作用");

const props = defineProps<{
  title: string;
  type: string;
  effect: string;
  description: string;
  showIcon: boolean;
  closable: boolean;
  center: boolean;
}>();
const emit = defineEmits<{
  (e: "close", type: string): void;
}>();

const handleClose = () => {
  emit("close", props.type);
};
</script>
<style lang="scss" scoped></style>
